<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {searchEnterpriseApi, searchRecruitmentApi, searchUserApi} from "@/api/path/search";
import {ElMessage} from "element-plus";
import ElementContainer from "@/components/common/elementContainer.vue";
import router from "@/router";

const dataList = ref();
const searchType = ref();
const searchKey = ref();
const loading = ref();
let api;
const route = useRoute();
const getData = () => {
  api(searchKey.value).then(res => {
    if (res.success) {
      // dataList.value = [...res.datalist];
      dataList.value = res.datalist;
      loading.value = false;
    }
    else {
      ElMessage.error(res.msg);
      loading.value = false;
    }
  })
}
const initData = () => {
  dataList.value = [];
  loading.value = true;
  searchKey.value = route.query.word;
  searchType.value = route.query.type;
  switch (searchType.value) {
    case 'enterprise':
      api = searchEnterpriseApi;
      getData();
      break;
    case 'user':
      api = searchUserApi;
      getData();
      break;
    case 'recruit':
      api = searchRecruitmentApi;
      getData();
      break;
    default: ElMessage.error('搜索路由出错')
  }
}
watch(()=>route, (newValue, oldValue) => {
  initData()
},{deep:true, immediate:true})
onMounted(() => {
  initData();
})
</script>

<template>
  <span class="main-wrapper">
    <span class="content-wrapper">
      搜索关键字：{{searchKey}}
<!--      已为您找到以下结果，共{{dataList.length}}条-->
      <el-skeleton :loading="loading" animated>
        <template #template>
        </template>
        <template #default>
          <element-container v-for="(ele, index) in dataList" :key="'_' + index" :type="searchType" :data="ele"></element-container>
        </template>
      </el-skeleton>
    </span>
  </span>


</template>

<style scoped>
.main-wrapper {
  display: flex;
  padding: 30px 100px;
  /*height: calc(100% - var(--guide-height));*/
  min-height: 100%;
  height: auto;
  justify-content: center;
  width: 100%;
  overflow-y: auto;
  /*justify-content: center;*/
  background-color: var(--color-light);
  .content-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 30px;
    background-color: white;
    overflow-y: auto;
    /*min-height: 100%;*/
    border-radius: 0 20px 20px 20px;
  }
}
</style>